<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <el-row>
      <el-card style="width: 100%;">
        用户角色
        <span style="float: right">

            <el-button @click="()=>{router.push('/permission/user')}">回到列表页</el-button>
        </span>
      </el-card>
    </el-row>
    <el-table
        :data="state.data"
        border
        ref="tableRef"
        v-loading="state.loading"
        element-loading-text="正在加载..."
        :header-cell-style="{'text-align':'center','font-weight':'bold'}"
        :cell-style="{'text-align':'center'}"
        row-key="id"
        :tree-props="{ children: 'children'}"
        style="flex: 1;">
      <template v-for="item in columns">
        <el-table-column :prop="item.prop" :label="item.label" :fixed="item.fixed" :min-width="item.minWidth" :sortable="item.sortable" :sort-method="sortMethod">
          <template #default="scope" v-if="item.render">
            <render-column :render="item.render" :scope="scope" :item="item"></render-column>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <route-add-form v-if="state.showAddForm" :is-show="state.showAddForm" :on-close="onClose" :routes="state.data" :before-submit="beforeAdd" :on-success="onSuccess" :parent="state.parent"></route-add-form>

    <guigu-loading v-if="state.loading" text="正在加载请稍后..."></guigu-loading>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import RouteAddForm from "@/views/System/Route/RouteAddForm/index.vue";
import GuiguLoading from "@/components/GuiguLoading/index.vue";
import RenderColumn from "@/components/RenderColumn/index.vue";
import {userRole} from "@/api/backend/permission/userrole.js";
const state=reactive({
  data:[],
  loading:false
})
const route=useRoute()
const router=useRouter()
const formRef=ref()
const columns = [
  {
    prop: "roleId",
    label: "角色id",
    minWidth:'160px'
  },

  {
    prop: "roleCode",
    label: "角色编码",
    minWidth:'160px',
  },
  {
    prop: "roleName",
    label: "角色名称",
    minWidth:'160px',
  },
  {
    prop: "desc",
    label: "描述",
    minWidth:'160px'
  }]

const refresh=()=>{
  const userId=route.params.userId
  state.loading=true
  userRole(userId).then(res=>{
    state.data=res.data
  }).finally(()=>{
    state.loading=false
  })
}
onMounted(()=>{
  refresh()
})
</script>

<style scoped>

</style>